<template>
  <van-count-down :time="time" v-on="$listeners">
    <template #default="timeData">
      <span class="count-block">{{ timeData.hours }}</span>
      <span class="count-colon">:</span>
      <span class="count-block">{{ timeData.minutes }}</span>
      <span class="count-colon">:</span>
      <span class="count-block">{{ timeData.seconds }}</span>
    </template>
  </van-count-down>
</template>

<script>
export default {
  props: ['time'],
  methods: {},
}
</script>


<style>
.count-colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.count-block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>